<!--
 * @Author Malred
 * @Date 2025-05-31 18:23:29
 * @Description i18n语言切换按钮
 -->
<template>
  <el-dropdown trigger="click" @command="handleSelect">
    <el-button circle style="background-color: transparent;">
      <img :src="translateIcon" alt="Language" style="width: 20px; height: 20px;" />
    </el-button>

    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="option in options" :key="option.key" :command="option.key">
          {{ option.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from 'vue'
import { useI18n } from 'vue-i18n'
import { translateIcon } from '../lib/icons.js'
import { messages } from '../includes/i18n.js'

const { proxy } = getCurrentInstance()
const { t, locale } = useI18n()

// 动态生成语言选项
const options = computed(() => [
  {
    label: t('info.translate.btn.en'),
    key: 'en'
  },
  {
    label: t('info.translate.btn.cn'),
    key: 'cn'
  }
])

// 切换语言
const handleSelect = (key) => {
  locale.value = String(key)
}
</script>

<style scoped>
/* 可选：调整按钮样式 */
.el-button {
  border: none;
  padding: 0;
  width: 36px;
  height: 36px;
}
</style>
